<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .head_title {
            width: 60px;
            height: 60px;
        }

        .dropdown {
            float: right;
        }

        nav {
            margin-bottom: 0px;
        }

        li a {
            font-size: 1.5em;
        }

        #searchDiv {
            width: 100%;
            height: 100px;
            background: cadetblue;
            padding-top: 30px;
        }

        #searchDivShow {
            width: 100%;
            height: auto;
            background: #0f0;
            padding-left: 100px;
        }

        .coverMessage {
            padding-left: 100px;
        }

        .elseMessage {
            padding-left: 300px;
        }

        img {
            width: 150px;
            height: 150px;
        }
    </style>
    <script>
        window.onload = function () {
            var i = 0
            var vm1 = new Vue({
                el: '.navbar',
                data: {
                    showBook: 1
                },
                methods: {
                    exit() {
                        window.location.href = "HomePage.html"
                    }
                }
            })

            var vm2 = new Vue({
                el: '#searchDiv',
                data: {
                    book: [],
                    showBook: 1,
                    searchClass: 1,
                    searchbook: { name: "", author: "", classBook: "", way: "", image: "",mail:"" },
                    searchbooklist: []
                },
                methods: {
                    show() {
                        this.book = [{}, {}]
                    },
                    showBookdiv() {
                        // 实现书名查询
                        // this.showBook=2
                        // 遍历查找数据
                        if (this.showBook == 2) {
                            for (var i = 0; i < this.book.length; i++) {
                                if (this.book[i].name == this.searchbook.name) {
                                    this.searchbook = this.book[i]
                                }
                            }
                        }
                        if (this.showBook == 3) {
                            for (var i = 0; i < this.book.length; i++) {
                                if (this.book[i].author == this.searchbook.author) {
                                    this.searchbooklist.push(this.book[i])
                                }
                            }
                        }
                        if (this.showBook == 4) {
                            for (var i = 0; i < this.book.length; i++) {
                                if (this.book[i].classBook == this.searchbook.classBook) {
                                    this.searchbooklist.push(this.book[i])
                                }
                            }
                        }


                    },
                    delBookdiv() {
                        this.searchbook = { name: "", author: "", classBook: "", way: "", image: "",mail:"" }
                        this.searchbooklist = []
                        alert("已经清空")
                    }
                },
                //当Vue实例挂载结束后，加载远程数据设置Data属性
                mounted() {
                    $.getJSON('book.json', result => {
                        this.book = result.book
                    })
                },
            })
        }

    </script>
</head>

<body>
    <!-- 1.顶部导航栏 -->
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar"
                    aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <img src="images/bookTitle.png" alt="" class="head_title">
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">书海 <span class="sr-only">(current)</span></a></li>
                    <li><a href="HomePage.html">首页</a></li>
                    <li><a href="mainPage.html">主页</a></li>
                    <li><a href="bookcase.html">书架</a></li>
                    <li><a href="search.html">搜索</a></li>
                </ul>
                <!-- 右侧输出 -->
                <ul class="nav navbar-nav navbar-right hidden-sm">
                    <li id="login"><a href="login.html" style="color: #f00;">登录</a></li>
                    <li class="nav navbar-nav navbar-right hidden-sm">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">关于我们 <span class="caret"></span></a>
                        <ul class="dropdown-menu" aria-labelledby="dLabel">
                            <li class='dropdown-header'><a href="#">小队成员</a></li>
                            <li><a href="#">许华钢</a></li>
                            <li><a href="#">高伟</a></li>
                            <li><a href="#">肖相荣</a></li>
                            <li><a href="#">徐睿彬</a></li>
                            <li><a href="#">杨祥华</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right hidden-sm">
                    <!-- 模态框实现退出操作 -->
                    <li id="navli">
                        <a href="#" style="color: #f00;" data-toggle="modal" data-target="#myModal">退出</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">友情提示</h4>
                    </div>
                    <div class="modal-body">
                        您是否确认退出？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="exit" data-dismiss="modal">确认</button>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <div id="searchDiv">
        <div style="padding-bottom: 30px;">
            <input type="button" value="书名查找" style="float: left;" @click="searchClass=1">
            <input type="button" value="作者查询" style="float: left;" @click="searchClass=2">
            <input type="button" value="类别搜索" style="float: left;" @click="searchClass=3">
            <input type="text" class="col-xs-4 col-xs-offset-3" style="height: 35px;" v-if="searchClass==1"
                v-model="searchbook.name" placeholder="输入书名" @click="showBook=2">
            <input type="text" class="col-xs-4 col-xs-offset-3" style="height: 35px;" v-if="searchClass==2"
                v-model="searchbook.author" placeholder="作者名称" @click="showBook=3">
            <input type="text" class="col-xs-4 col-xs-offset-3" style="height: 35px;" v-if="searchClass==3"
                v-model="searchbook.classBook" placeholder="书籍类型" @click="showBook=4">

            <!-- <input type="text" class="col-xs-4 col-xs-offset-4" style="height: 35px;"
                v-model="searchbook.name"   placeholder="输入书名"> -->
            <!-- <input type="button" value="搜索" class="btn btn-danger" @click="showBook=2"  > -->
            <input type="button" value="搜索" class="btn btn-danger" @click="showBookdiv">
            <input type="button" value="清空搜索记录" class="btn btn-danger" @click="delBookdiv">
        </div>


        <div id="searchDivShow">
            <table>
                <tr>
                    <th class="coverMessage">封面</th>
                    <th class="elseMessage">其他信息</th>
                </tr>
            </table>
            <!-- 输出所有数据 -->
            <table>
                <tr v-for="(Book,index) in book" v-if="showBook==1">
                    <td> 
                        <a :href="Book.mail">
                            <img :src="Book.image" alt="">
                        </a>
                    </td>
                    <td>
                        <p>名称：{{Book.name}}</p>
                        <p>作者：{{Book.author}}</p>
                        <p>分类：{{Book.classBook}}</p>
                        <p>简介：{{Book.way}}</p>
                    </td>
                </tr>
            </table>
            <table>
                <tr v-if="showBook==2">
                    <td> 
                        <a :href="searchbook.mail">
                            <img :src="searchbook.image" alt="">
                        </a>
                        </td>
                    <td>
                        <p>名称：{{searchbook.name}}</p>
                        <p>作者：{{searchbook.author}}</p>
                        <p>分类：{{searchbook.classBook}}</p>
                        <p>简介：{{searchbook.way}}</p>
                    </td>
                </tr>

                <tr v-for="(searchbooklistindex,index) in searchbooklist" v-if="showBook==3">
                    <td> 
                        <a :href="searchbooklistindex.mail">
                            <img :src="searchbooklistindex.image" alt="">
                        </a>
                    </td>
                    <td>
                        <p>名称：{{searchbooklistindex.name}}</p>
                        <p>作者：{{searchbooklistindex.author}}</p>
                        <p>分类：{{searchbooklistindex.classBook}}</p>
                        <p>简介：{{searchbooklistindex.way}}</p>
                    </td>
                </tr>

                <tr v-for="(searchbooklistindex,index) in searchbooklist" v-if="showBook==4">
                    <td> 
                        <a :href="searchbooklistindex.mail">
                            <img :src="searchbooklistindex.image" alt="">
                        </a>
                    </td>
                    <td>
                        <p>名称：{{searchbooklistindex.name}}</p>
                        <p>作者：{{searchbooklistindex.author}}</p>
                        <p>分类：{{searchbooklistindex.classBook}}</p>
                        <p>简介：{{searchbooklistindex.way}}</p>
                    </td>
                </tr>
            </table>

        </div>

    </div>
</body>

</html>